<script lang="ts" setup>
import { computed, h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import {
  NButton,
  NButtonGroup,
  NCard,
  NDropdown,
  NEmpty,
  NGrid,
  NGridItem,
  NIcon,
  NImage,
  NInput,
  NModal,
  NPagination,
  NPopover,
  NSelect,
  NSkeleton,
  NSpace,
  NSpin,
  NTag,
  NTooltip,
  useMessage
} from "naive-ui";
import {
  fetchImageData,
  fetchMediaCollectionData,
  mediaApi,
} from "@/service/api/media";
import { MediaType } from "@/constants/media";
import { $t } from '@/locales';
import SeasonInfo from "./components/SeasonInfo.vue";

defineOptions({
  name: "TvSeriesPage",
});

// 工具函数
const message = useMessage();

// 状态管理
const tvList = ref<Api.Media.MediaItem[]>([]);
const sortBy = ref(localStorage.getItem("tvSortBy") || "nameAsc");
const searchText = ref("");
const loading = ref(false);
const cardLoading = ref<Set<string>>(new Set());
const imageLoadErrors = ref<Set<string>>(new Set());
const posterUrls = ref<Record<string, string>>({});
const activeModalId = ref<string | null>(null);
const seasonInfo = ref<Api.Media.MediaCollectionItemList[]>([]);
const seasonLoading = ref(false);

// 分页配置
const pagination = ref({
  page: 1,
  pageSize: 24,
  itemCount: 0,
});

// 布局配置
const layoutMode = ref<"grid" | "list">(
  (localStorage.getItem("tvLayoutMode") as "grid" | "list") || "grid"
);

// 响应式布局配置
const responsive: 'self' | 'screen' | undefined = 'self';
// const responsive: Record<string, number> = {
//   xs: 2, // 超小屏幕显示2列
//   s: 3, // 小屏幕显示3列
//   m: 4, // 中等屏幕显示4列
//   l: 5, // 大屏幕显示5列
//   xl: 6, // 超大屏幕显示6列
//   "2xl": 8, // 2K及以上显示8列
// };

// 布局相关的计算属性
const cardHeight = computed(() => (layoutMode.value === "grid" ? 360 : 200));
const coverWidth = computed(() =>
  layoutMode.value === "grid" ? "100%" : "140px"
);


// 封面样式计算属性
const coverStyle = computed(() => ({
  width: layoutMode.value === "list" ? coverWidth.value : "100%",
  height: layoutMode.value === "list" ? "100%" : `${cardHeight.value}px`,
}));

// 计算属性
const sortOptions = computed(() => [
  {
    label: $t("page.tv.sort.nameAsc"),
    value: "nameAsc",
  },
  {
    label: $t("page.tv.sort.nameDesc"),
    value: "nameDesc",
  },
  {
    label: $t("page.tv.sort.dateAsc"),
    value: "dateAsc",
  },
  {
    label: $t("page.tv.sort.dateDesc"),
    value: "dateDesc",
  },
]);

// 监听器
watch([layoutMode, sortBy], ([newLayoutMode, newSortBy]) => {
  localStorage.setItem("tvLayoutMode", newLayoutMode);
  localStorage.setItem("tvSortBy", newSortBy);
});

// 方法
async function fetchTvList() {
  if (loading.value) return;

  try {
    loading.value = true;
    const { data } = await mediaApi.getMediaList({
      pageIndex: pagination.value.page,
      pageSize: pagination.value.pageSize,
      name: searchText.value,
      sortField: sortBy.value.includes("name") ? "name" : "lastWriteTime",
      sortOrder: sortBy.value.endsWith("Asc"),
      mediaType: MediaType.Series,
    });

    if (data?.result) {
      tvList.value = data.result;
      pagination.value.itemCount = data.total;
    }
  } catch (error) {
    console.error("获取电视剧列表失败:", error);
    message.error($t("page.tv.fetchError"));
  } finally {
    loading.value = false;
  }
}


// 添加获取季度信息的方法
async function fetchSeasonInfo(id: string) {
  if (seasonLoading.value) return;

  try {
    seasonLoading.value = true;
    const { data } = await fetchMediaCollectionData(id);
    if (data) {
      seasonInfo.value = data;
    }
  } catch (error) {
    console.error("获取季度信息失败:", error);
    message.error($t("page.tv.fetchSeasonError"));
  } finally {
    seasonLoading.value = false;
  }
}

// 修改卡片点击处理方法
async function handleCardClick(item: Api.Media.MediaItem) {
  try {
    cardLoading.value.add(item.id);
    if (activeModalId.value === item.id) {
      // 如果点击的是当前展开的剧集，则收起
      activeModalId.value = null;
      seasonInfo.value = [];
    } else {
      // 否则展开新的剧集信息
      activeModalId.value = item.id;
      await fetchSeasonInfo(item.id);
    }
  } catch {
    message.error($t("page.tv.openError"));
  } finally {
    cardLoading.value.delete(item.id);
  }
}

function handleSortChange(value: string) {
  sortBy.value = value;
  pagination.value.page = 1;
  fetchTvList();
}

function handleSearch() {
  pagination.value.page = 1;
  fetchTvList();
}

function handlePageChange(page: number) {
  pagination.value.page = page;
  fetchTvList();
}

function handlePageSizeChange(pageSize: number) {
  pagination.value.pageSize = pageSize;
  pagination.value.page = 1;
  fetchTvList();
}

// 处理函数
async function handleRefresh() {
  if (loading.value) return;
  pagination.value.page = 1;
  await fetchTvList();
  message.success($t("common.refreshSuccess"));
}

function handleImageError(id: string) {
  imageLoadErrors.value.add(id);
}

// 添加操作菜单选项
const actionOptions = computed(() => [
  {
    label: $t("common.openFolder"),
    key: "openFolder",
    icon: renderIcon("icon-material-symbols:folder-open"),
  },
  {
    label: $t("common.copyPath"),
    key: "copyPath",
    icon: renderIcon("icon-material-symbols:content-copy"),
  },
  {
    type: "divider",
    key: "d1",
  },
  {
    label: $t("common.refresh"),
    key: "refresh",
    icon: renderIcon("icon-material-symbols:refresh"),
  },
]);

// 渲染图标函数
function renderIcon(icon: string) {
  return () => h("div", { class: icon });
}

// 处理操作菜单选择
async function handleActionSelect(item: Api.Media.MediaItem, key: string) {
  if (key === 'openFolder') {// eslint-disable-next-line no-warning-comments
    // TODO: 调用后端接口打开文件夹
  } else if (key === 'copyPath') {
    await navigator.clipboard.writeText(item.path);
    message.success($t('common.copySuccess'));
  } else if (key === 'refresh') {// eslint-disable-next-line no-warning-comments
    // TODO: 更新单个项目
  }
}

// 添加批量操作相关状态
const checkedKeys = ref<string[]>([]);
const showBatchActions = computed(() => checkedKeys.value.length > 0);

// 批量操作菜单
const batchActionOptions = computed(() => [
  {
    label: $t("common.batchRefresh"),
    key: "batchRefresh",
    icon: renderIcon("icon-material-symbols:refresh"),
  },
]);

async function handleBatchAction(key: string) {
  if (key === 'batchRefresh') {
    // eslint-disable-next-line no-warning-comments
    // TODO: 批量更新项目
  }
}

// 添加加载图片的方法
async function loadPosterImage(id: string) {
  if (posterUrls.value[id]) return;
  const item = tvList.value.find((tv) => tv.id === id);
  if (!item) return;
  const newVar =
    layoutMode.value === "grid" ? item?.landscapeAddress : item?.posterAddress;
  if (!newVar) return;
  try {
    const { data } = await fetchImageData(newVar);
    if (data) {
      const blob = new Blob([data], { type: "image/jpeg" });
      posterUrls.value[id] = URL.createObjectURL(blob);
    }
  } catch (error) {
    console.error("加载图片失败:", error);
    handleImageError(id);
  }
}

// 添加监听器和清理逻辑
watch(
  tvList,
  (newList) => {
    newList.forEach((item) => {
      if (item.id && !imageLoadErrors.value.has(item.id)) {
        loadPosterImage(item.id);
      }
    });
  },
  { immediate: true }
);

onBeforeUnmount(() => {
  Object.values(posterUrls.value).forEach((url) => {
    URL.revokeObjectURL(url);
  });
});

// 修改 layoutMode 的听器
watch(layoutMode, () => {
  // 清除所有已缓存的图片 URL
  Object.values(posterUrls.value).forEach((url) => {
    URL.revokeObjectURL(url);
  });
  posterUrls.value = {};
  imageLoadErrors.value.clear(); // 清除错误记录，允许重新加载

  // 重新载当前列表中的图片
  tvList.value.forEach((item) => {
    if (item.id) {
      // 移除错误检查，因为我们要重新尝试加载
      loadPosterImage(item.id);
    }
  });
});


// 初始化
fetchTvList();

function handlePlay(episode: Api.Media.MediaItem) {
  // eslint-disable-next-line no-warning-comments
  // TODO: 处理播放事件
  console.log("Play episode:", episode);
}

// 处理模态框可见性
function handleModalVisibility(id: string, value: boolean) {
  if (value) {
    activeModalId.value = id;
  } else {
    activeModalId.value = null;
    seasonInfo.value = [];
    seasonLoading.value = false;
  }
}

// 获取模态框显示状态
function getModalShow(id: string): boolean {
  return activeModalId.value === id;
}

// 计算模态框样式
const modalStyle = computed(() => {
  // 获取视窗宽度
  const vw = window.innerWidth;

  // 基础样式
  const baseStyle = {
    margin: "32px auto",
    padding: "0",
    borderRadius: "8px",
    overflow: "hidden",
  };

  // PC端(>1200px)使用更宽的宽度
  if (vw >= 1200) {
    console.log('111');
    return {
      ...baseStyle,
      width: "1200px",
      maxWidth: "95vw",
    };
  }

  // 平板和移动端使用较窄的宽度
  console.log('222');
  return {
    ...baseStyle,
    width: "900px",
    maxWidth: "90vw",
    margin: "24px auto",
  };
});

// 处理窗口大小变化
const handleResize = () => {
  // 强制重新计算modalStyle
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let a = modalStyle.value;
};

// 监听窗大小变化
onMounted(() => {
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- 头部选区 -->
    <div
      class="p-16px border-b border-[#eee] dark:border-[#333] shrink-0 sticky top-0 z-10 bg-white dark:bg-[#18181c] shadow-sm transition-all"
    >
      <div class="flex justify-between items-center">
        <div class="text-16px font-bold text-primary">
          {{ $t("page.tv.title") }}
          <!-- 添加批量操作下拉菜单 -->
          <NDropdown
            v-if="showBatchActions"
            :options="batchActionOptions"
            trigger="hover"
            @select="handleBatchAction"
          >
            <NTag class="ml-8px cursor-pointer">
              {{ checkedKeys.length }} {{ $t("common.selected") }}
            </NTag>
          </NDropdown>
        </div>
        <div class="flex items-center gap-12px">
          <!-- 搜索框 -->
          <NInput
            v-model:value="searchText"
            :placeholder="$t('common.keywordSearch')"
            @keydown.enter="handleSearch"
          >
            <template #suffix>
              <NIcon class="cursor-pointer" @click="handleSearch">
                <IconMaterialSymbolsSearch />
              </NIcon>
            </template>
          </NInput>

          <!-- 序选择 -->
          <NSelect
            v-model:value="sortBy"
            :consistent-menu-width="false"
            :options="sortOptions"
            @update:value="handleSortChange"
          />

          <!-- 布局切换 -->
          <NButtonGroup>
            <NButton
              :type="layoutMode === 'grid' ? 'primary' : 'default'"
              @click="layoutMode = 'grid'"
            >
              <template #icon>
                <IconMaterialSymbolsGridView />
              </template>
            </NButton>
            <NButton
              :type="layoutMode === 'list' ? 'primary' : 'default'"
              @click="layoutMode = 'list'"
            >
              <template #icon>
                <IconMaterialSymbolsViewList />
              </template>
            </NButton>
          </NButtonGroup>

          <!-- 刷新按钮 -->
          <NButton :loading="loading" circle secondary @click="handleRefresh">
            <template #icon>
              <IconMaterialSymbolsRefresh />
            </template>
          </NButton>
        </div>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="flex-1 overflow-auto custom-scrollbar">
      <NSpin :delay="300" :show="loading">
        <div class="p-16px">
          <NEmpty
            v-if="!loading && !tvList.length"
            :description="$t('page.tv.noData')"
          />
          <template v-else>
            <!-- 网格布局 -->
            <template v-if="layoutMode === 'grid'">
              <NGrid :cols="4" :responsive="responsive" :x-gap="16" :y-gap="16">
                <NGridItem v-for="item in tvList" :key="item.id">
                  <div :data-id="item.id" class="movie-poster-container">
                    <NCard
                      :loading="cardLoading.has(item.id)"
                      class="tv-card"
                      hoverable
                      @click="handleCardClick(item)"
                    >
                      <template #cover>
                        <NSkeleton v-if="loading" :height="cardHeight" />
                        <NImage
                          v-else
                          fallback-src="/favicon.svg"
                          :preview-disabled="true"
                          :src="posterUrls[item.id]"
                          :style="coverStyle"
                          object-fit="cover"
                          @error="handleImageError(item.id)"
                        />
                      </template>
                      <NSpace :size="4" vertical>
                        <div class="flex justify-between items-start">
                          <div
                            class="text-14px font-medium text-[var(--n-text-color-base)] line-clamp-2"
                          >
                            {{ item.name }}
                            <NTag v-if="item.isDisc" size="small" type="info"
                              >蓝光
                            </NTag>
                          </div>
                          <NDropdown
                            :options="actionOptions"
                            trigger="hover"
                            @select="handleActionSelect(item, $event)"
                          >
                            <NButton circle quaternary size="small" @click.stop>
                              <template #icon>
                                <NIcon>
                                  <IconMaterialSymbolsMoreVert />
                                </NIcon>
                              </template>
                            </NButton>
                          </NDropdown>
                        </div>
                        <MediaNfoInfo :nfo="item.nfo" mode="grid" />
                        <div
                          class="flex items-center justify-between text-12px text-[var(--n-text-color-3)]"
                        >
                          <div class="flex items-center gap-4px">
                            <IconMaterialSymbolsHardDriveOutline
                              class="text-14px"
                            />
                            {{ item.size }}GB
                          </div>
                          <div class="flex items-center gap-4px">
                            <IconMaterialSymbolsCalendarTodayOutline
                              class="text-14px"
                            />
                            {{
                              new Date(item.lastWriteTime).toLocaleDateString()
                            }}
                          </div>
                        </div>
                        <div class="text-12px text-[var(--n-text-color-3)]">
                          <NTooltip trigger="hover">
                            <template #trigger>
                              <span class="truncate block">{{
                                item.path
                              }}</span>
                            </template>
                            {{ item.path }}
                          </NTooltip>
                        </div>
                        <div class="meta-group">
                          <span v-if="item.codec" class="meta-item">
                            <i class="i-material-symbols:code" />
                            {{ item.codec }}
                          </span>
                          <NPopover
                            trigger="hover"
                            placement="top"
                            :show-arrow="false"
                            :raw="true"
                            :style="{
                              padding: '0',
                              border: 'none',
                              maxWidth: '300px',
                              background: 'var(--n-card-color)',
                            }"
                          >
                            <template #trigger>
                              <span class="meta-item">
                                <i class="i-material-symbols:subtitles" />
                                {{
                                  item.subtitle?.length
                                    ? $t("page.tv.episodeDetail.subtitle") +
                                      ` (${item.subtitle.length})`
                                    : $t("page.tv.episodeDetail.noSubtitle")
                                }}
                              </span>
                            </template>
                            <div
                              v-if="item.subtitle?.length"
                              class="subtitle-list"
                            >
                              <div
                                v-for="(sub, index) in item.subtitle"
                                :key="index"
                                class="subtitle-item"
                              >
                                <i
                                  class="i-material-symbols:subtitles-outline"
                                />
                                <span class="subtitle-name">{{ sub }}</span>
                              </div>
                            </div>
                          </NPopover>
                        </div>
                      </NSpace>
                      <template v-if="layoutMode !== 'grid'" #footer>
                        <div class="text-12px text-[var(--n-text-color-3)]">
                          {{ new Date(item.lastWriteTime).toLocaleString() }}
                        </div>
                      </template>
                    </NCard>

                    <NModal
                      :show="getModalShow(item.id)"
                      :mask-closable="true"
                      preset="card"
                      :style="modalStyle"
                      :title="item.name"
                      size="huge"
                      :bordered="false"
                      @update:show="
                        (value) => handleModalVisibility(item.id, value)
                      "
                    >
                      <SeasonInfo
                        v-if="activeModalId === item.id"
                        :seasons="seasonInfo"
                        :loading="seasonLoading"
                        @play="handlePlay"
                      />
                    </NModal>
                  </div>
                </NGridItem>
              </NGrid>
            </template>

            <!-- 列表布局 -->
            <template v-else>
              <div class="list-layout">
                <div v-for="item in tvList" :key="item.id">
                  <div :data-id="item.id" class="movie-poster-container">
                    <NCard
                      :loading="cardLoading.has(item.id)"
                      class="tv-card"
                      hoverable
                      @click="handleCardClick(item)"
                    >
                      <template #cover>
                        <NSkeleton v-if="loading" :height="cardHeight" />
                        <NImage
                          v-else
                          fallback-src="/favicon.svg"
                          :preview-disabled="true"
                          :src="posterUrls[item.id]"
                          :style="coverStyle"
                          object-fit="cover"
                          @error="handleImageError(item.id)"
                        />
                      </template>
                      <NSpace :size="4" vertical>
                        <div class="flex justify-between items-start">
                          <div
                            class="text-14px font-medium text-[var(--n-text-color-base)] line-clamp-2"
                          >
                            {{ item.name }}
                            <NTag v-if="item.isDisc" size="small" type="info"
                              >蓝光
                            </NTag>
                          </div>
                          <NDropdown
                            :options="actionOptions"
                            trigger="hover"
                            @select="handleActionSelect(item, $event)"
                          >
                            <NButton circle quaternary size="small" @click.stop>
                              <template #icon>
                                <NIcon>
                                  <IconMaterialSymbolsMoreVert />
                                </NIcon>
                              </template>
                            </NButton>
                          </NDropdown>
                        </div>
                        <MediaNfoInfo :nfo="item.nfo" mode="list" />
                        <div
                          class="flex items-center justify-between text-12px text-[var(--n-text-color-3)]"
                        >
                          <div class="flex items-center gap-4px">
                            <IconMaterialSymbolsHardDriveOutline
                              class="text-14px"
                            />
                            {{ item.size }}GB
                          </div>
                          <div class="flex items-center gap-4px">
                            <IconMaterialSymbolsCalendarTodayOutline
                              class="text-14px"
                            />
                            {{
                              new Date(item.lastWriteTime).toLocaleDateString()
                            }}
                          </div>
                        </div>
                        <div class="text-12px text-[var(--n-text-color-3)]">
                          <NTooltip trigger="hover">
                            <template #trigger>
                              <span class="truncate block">{{
                                item.path
                              }}</span>
                            </template>
                            {{ item.path }}
                          </NTooltip>
                        </div>
                        <div class="meta-group">
                          <span v-if="item.codec" class="meta-item">
                            <i class="i-material-symbols:code" />
                            {{ item.codec }}
                          </span>
                          <NPopover
                            trigger="hover"
                            placement="top"
                            :show-arrow="false"
                            :raw="true"
                            :style="{
                              padding: '0',
                              border: 'none',
                              maxWidth: '300px',
                              background: 'var(--n-card-color)',
                            }"
                          >
                            <template #trigger>
                              <span class="meta-item">
                                <i class="i-material-symbols:subtitles" />
                                {{
                                  item.subtitle?.length
                                    ? $t("page.tv.episodeDetail.subtitle") +
                                      ` (${item.subtitle.length})`
                                    : $t("page.tv.episodeDetail.noSubtitle")
                                }}
                              </span>
                            </template>
                            <div
                              v-if="item.subtitle?.length"
                              class="subtitle-list"
                            >
                              <div
                                v-for="(sub, index) in item.subtitle"
                                :key="index"
                                class="subtitle-item"
                              >
                                <i
                                  class="i-material-symbols:subtitles-outline"
                                />
                                <span class="subtitle-name">{{ sub }}</span>
                              </div>
                            </div>
                          </NPopover>
                        </div>
                      </NSpace>
                      <template v-if="layoutMode === 'list'" #footer>
                        <div class="text-12px text-[var(--n-text-color-3)]">
                          {{ new Date(item.lastWriteTime).toLocaleString() }}
                        </div>
                      </template>
                    </NCard>

                    <NModal
                      :show="getModalShow(item.id)"
                      :mask-closable="true"
                      :style="modalStyle"
                      preset="card"
                      :title="item.name"
                      size="huge"
                      :bordered="false"
                      @update:show="
                        (value) => handleModalVisibility(item.id, value)
                      "
                    >
                      <SeasonInfo
                        v-if="activeModalId === item.id"
                        :seasons="seasonInfo"
                        :loading="seasonLoading"
                        @play="handlePlay"
                      />
                    </NModal>
                  </div>
                </div>
              </div>
            </template>
          </template>
        </div>
      </NSpin>
    </div>

    <!-- 底部分页区 -->
    <div class="p-16px border-t border-[#eee] dark:border-[#333] shrink-0">
      <div class="flex justify-center">
        <NPagination
          v-model:page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :item-count="pagination.itemCount"
          :page-sizes="[24, 48, 96]"
          :prefix="() => $t('common.pagination.total')"
          show-quick-jumper
          show-size-picker
          @update:page="handlePageChange"
          @update:page-size="handlePageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 基础布局样式 */
.movie-poster-container {
  width: 100%;
  height: 100%;
  position: relative;

  /* 列表布局时的特殊处理 */

  .list-layout & {
    margin-bottom: 16px;
  }
}

/* 卡片样式 */
.tv-card {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--n-primary-color);

    :deep(.n-card-cover img) {
      transform: scale(1.08);
    }
  }
}

/* 暗色模式适配 */
:deep(.dark) {
  --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

  .n-dropdown-trigger:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }
}

/* 通用样式优化 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 过渡动画优化 */
.fade-list-enter-active,
.fade-list-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-list-enter-from,
.fade-list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.fade-list-move {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 添加滚动条样式 */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--n-scrollbar-color) transparent;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--n-scrollbar-color);
    border-radius: 3px;
  }
}

/* 优化按钮样式 */
.n-button:not(.n-button--quaternary) {
  min-width: 80px;
}

/* 化下拉菜单触发区域 */
.n-dropdown-trigger {
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.3s;

  &:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }
}

/* 添加过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

:deep(.n-modal) {
  transform-origin: center;
  animation: modalEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 优化滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--n-scrollbar-color);
    border-radius: 3px;
  }

  /* 优化内容区域样式 */
  .n-card {
    max-height: 90vh;
    display: flex;
    flex-direction: column;

    &__content {
      flex: 1;
      overflow: hidden;
    }
  }
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 暗色模式优化 */
:deep(.dark) {
  .n-modal {
    background: rgba(24, 24, 28, 0.95);
    backdrop-filter: blur(20px);

    .n-card {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.2);

      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
  }
}

.subtitle-list {
  max-height: 200px;
  overflow-y: auto;
  font-size: var(--font-size-small);
  padding: 8px;
  border-radius: var(--border-radius);
}

.subtitle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  transition: background-color 0.2s var(--transition-timing);

  &:hover {
    background-color: var(--n-hover-color);
  }

  &:not(:last-child) {
    border-bottom: 1px solid var(--n-divider-color);
  }
}

.subtitle-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--n-text-color);
}

.subtitle-item i {
  color: var(--n-text-color-3);
  font-size: 16px;
}

.subtitle-list::-webkit-scrollbar {
  width: 4px;
}

.subtitle-list::-webkit-scrollbar-track {
  background: transparent;
}

.subtitle-list::-webkit-scrollbar-thumb {
  background-color: var(--n-scrollbar-color);
  border-radius: 2px;

  &:hover {
    background-color: var(--n-scrollbar-color-hover);
  }
}
</style>
